import React ,{ useState, useEffect, useRef }from 'react'
import { ArrowLeftOutlined } from '@ant-design/icons';
import { Input,Form,Checkbox,Button,Select, notification } from 'antd'
import axios from 'axios'
import "./zhuce.css"
export default function Zhuce(props) {
    const [regionList, setRegionList] = useState([])
    const [zhuceForm]=Form.useForm()
    useEffect(() => {
        axios.get("/regions").then(res => {
            setRegionList(res.data)
        })
    }, [])

    const onFinish=async(values)=>{
        console.log(values)
        values.password=values.password1
        delete values.password1
        delete values.password2
        values.roleId=3
        console.log(values)
       const response=await axios.post(`/users`, {
            ...values,
            "roleState": true,
            "default": false,
        })
        console.log(response)
        if(response.request.status==201)
        {
            notification.success({
                message:"注册成功！,请登录"
            })
            props.history.push("/login")
        }
        
        else{
            notification.error({
                message:"注册失败！"
            })
        }
    }
//     password: "lq555"
// region: "亚洲"
// roleId: 3
// username: "cucu"
    const onFinishFailed=()=>{

    }
    return (
        <div className="formContainer1">
             <div className="warptext">
                 <div className="backbtn"><Button shape="circle" type="default"  icon={<ArrowLeftOutlined />} onClick={()=>{
                     props.history.push("/login")
                 }}/></div>
            <div className="logintitle1">注册</div>
           
        <Form
          form={zhuceForm}
          name="basic"
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
          style={{opacity:0.8}}
            label="账号"
            name="username"
            rules={[{ required: true, message: '请输入账号' }]}
          >
            <Input placeholder="请输入账号"/>
          </Form.Item>
    
          <Form.Item
          style={{opacity:0.8}}

            label="密码"
            name="password1"
            validateTrigger="onBlur"
            rules={[{ required: true, message: '请输入密码' }]}
          >
            <Input.Password  placeholder="请输入密码"/>
          </Form.Item>
          <Form.Item style={{opacity:0.8}}
          className="psw1"
            label="确认密码"
            name="password2"
            validateTrigger="onBlur"
            rules={[{ required: true, message: '请再次输入密码' },(zhuceForm) => ({
                validator(_, value) {
                  if (!value || zhuceForm.getFieldValue('password1') === value) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error('两次输入密码不一致'));
                },
              }),
        ]}
          >
            <Input.Password  placeholder="请再次输入密码"/>
          </Form.Item>
        
          <Form.Item style={{opacity:0.8}}

                name="region"
                label="区域"
                rules={[{ required: true, message: 'Please input the title of collection!' }]}
                
            >
                <Select  placeholder="请选择">
                    {regionList.map(item => {
                        return <Select.Option value={item.value} key={item.id}  >{item.title}</Select.Option>
                    })}
                </Select>
            </Form.Item>
          <Form.Item  style={{opacity:0.8}}>
            <Button type="primary" htmlType="submit" className="confirmbtn">
             注册
            </Button>
          </Form.Item>
        </Form>
        </div>
        </div>
      );
}
